<template>
  <div class="task-module">
    <div class="tool-bar">
      <div class="menu-list">
        <el-dropdown @command="handleMyTaskMenu" class="menu-item" :class="curMenu === 1 ? 'active' : ''" trigger="click" placement="bottom">
          <span class="el-dropdown-link">{{curMenu === 1 ? menuMyTaskList[sectionType-1].name : menuMyTaskList[0].name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu>
            <el-dropdown-item :command="menu.sectionType" v-for="menu in menuMyTaskList" :key="menu.sectionType">{{menu.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-dropdown @command="handleAllTaskMenu" class="menu-item" :class="curMenu === 2 ? 'active' : ''" trigger="click" placement="bottom">
          <span class="el-dropdown-link">{{curMenu === 2 ? menuAllTasklist[sectionType-1].name : menuAllTasklist[0].name}}<i class="el-icon-arrow-down el-icon--right"></i></span>
          <el-dropdown-menu>
            <el-dropdown-item :command="menu.sectionType" v-for="menu in menuAllTasklist" :key="menu.sectionType">{{menu.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="menu-item" style="text-align: right;">
          <img src="../../../assets/livolobim/filter.png" @click="openFilterDialog">
          <div v-if="hasFilter" class="dot"></div>
        </div>
      </div>
    </div>
    <div class="submenu-list">
      <div v-if="curMenu === 1">
        <div class="menu-item" v-for="(menu, index) in submenuList1" :key="index" :class="curSubMenu === index+1 ? 'active' : ''" @click="selectTab(index+1)">{{menu.name}}</div>
      </div>
      <div v-if="curMenu === 2 && sectionType !== 3">
        <div class="menu-item" v-for="(menu, index) in submenuList2" :key="index" :class="curSubMenu === index+1 ? 'active' : ''" @click="selectTab(index+1)">{{menu.name}}</div>
      </div>
      <div v-if="curMenu === 2 && sectionType === 3">
        <div class="menu-item" v-for="(menu, index) in submenuList3" :key="index" :class="curSubMenu === index+1 ? 'active' : ''" @click="selectTab(index+1)">{{menu.name}}</div>
      </div>
    </div>
    <div class="content" ref="scrollcontainer" v-infinite-scroll="loadData" infinite-scroll-disabled="disabled" infinite-scroll-immediate="false">
      <div v-for="value in taskList" :key="value.id" :value="value">
        <div class="task-item" @click="openTaskDetail(value.id)">
          <span class="arrow-status" :class="getArrowType(value)"></span>
          <span class="task-status">{{getWord(value)}}</span>
          <div class="top">
            <div class="logo">
              <img :src="value.taskUrl? 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/'+value.taskUrl : 'https://livolo-office.oss-cn-hangzhou.aliyuncs.com/livolobim/task/icon%20blue-1.png'"  style="width: 48px; height: 48px;border-radius: 5px;">
            </div>
            <div class="task-info">
              <p class="taskName">{{value.taskName}}</p>
              <p class="project"><span>{{value.taskBelongName}}</span></p>
            </div>
          </div>
          <div class="bottom">
            <p><i class="el-icon-user"></i><span>{{value.taskPrincipalName}}</span><span v-if="value.taskRealEndtime">{{value.taskRealEndtime}}</span><span v-if="analyzeData(value)" :style="{'color': analyzeData(value).indexOf('提前')>= 0 ? '#21D779': '#FF5050'}">（{{analyzeData(value)}}）</span></p>
          </div>
        </div>
      </div>
      <img v-if="taskList.length === 0 && !isFirstLoading" style="width:200px;margin: auto;position:absolute;top:0;right:0;left:0;bottom: 0;" src="../../../assets/livolobim/empty.png" alt="">
    </div>
    <div style="text-align: center; line-height: 24px; color: #979797;" v-if="totalCount > 0">共有{{totalCount}}个任务</div>
    <div class="add-btn" @click="addTask" :style="{'bottom': bottomBtnPosition}"><i class="el-icon-plus"></i></div>
    <FilterPage title="任务筛选" page="task"  @filterData="filterData" ref="filterpage"/>
    <Tab currentTab="task"/>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import Tab from './component/Tab'
import {dateUtil} from '@/utils/dateUtil'
import FilterPage from './component/FilterPage'
import formUtil from "@/utils/formUtil";

export default {
  data() {
    return {
      bottomBtnPosition: '20px',
      curMenu: 1,
      sectionType: 1,
      curSubMenu: 2,
      menuMyTaskList: [{sectionType: 1, name: '我的任务'},{sectionType: 2, name: '今日任务'},{sectionType: 3, name: '最近7天'},{sectionType: 4, name: '最近30天'}],
      menuAllTasklist: [{sectionType: 1, name: '全部任务'},{sectionType: 2, name: '今日新增'},{sectionType: 3, name: '今日完成'}],
      submenuList1: [{sectionType: 1, name: '全部'},{sectionType: 2, name: '待我完成'},{sectionType: 3, name: '待我确认'}, {sectionType: 4, name: '我完成的'},{sectionType: 5, name: '我确认的'}],
      submenuList2: [{sectionType: 1, name: '全部'},{sectionType: 2, name: '待完成'},{sectionType: 3, name: '待确认'}, {sectionType: 4, name: '已完成'},{sectionType: 5, name: '已终止'}],
      submenuList3: [{sectionType: 1, name: '全部'},{sectionType: 2, name: '提前'},{sectionType: 3, name: '按时'}, {sectionType: 4, name: '逾期'}],
      taskList: [],
      isFirstLoading: true,
      loading: false,
      page: 1,
      totalPage: 1,
      totalCount: 0,
      postForm: {
        filterPrincipalIds: '',
        taskName: '',
        projectIds: '',
        filterStartPlanFinishTime: '',
        filterEndPlanFinishTime: '',
      },
      currentScrollTop: 0,
    }
  },
  mixins: [dingMixin],
  components: {
    Tab, FilterPage
  },
  beforeRouteLeave(to,from,next) {
    this.currentScrollTop = this.$refs.scrollcontainer.scrollTop;
    this.mobileStopRefresh()
    next()
  },
  activated() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone') {
        this.mobildPullToRefresh(() => {
          this.getTaskList(true)
        });
      }
    })
    if(window.NEEDREFRESH) {
      this.getTaskList(true)
      window.NEEDREFRESH = false;
    }else {
      this.$refs.scrollcontainer.scrollTop = this.currentScrollTop;
    }
  },
  methods: {
    openTaskDetail(id) {
      this.$router.push({ name: 'mlivolobim-taskDetail', params: {id}})
    },
    async filterData(param) {
      this.postForm = formUtil.deepCopy(param);
      await this.getTaskList(true);
    },
    openFilterDialog() {
      this.$refs.filterpage.init();
    },
    async handleMyTaskMenu(sectionType) {
      if(this.curMenu !== 1) {
        this.curMenu = 1;
      }
      this.curSubMenu = 1;
      this.sectionType = sectionType;
      await this.getTaskList(true);
    },
    async handleAllTaskMenu(sectionType) {
      if(this.curMenu !== 2) {
        this.curMenu = 2;
      }
      this.curSubMenu = 1;
      this.sectionType = sectionType;
      await this.getTaskList(true);
    },
    async selectTab(index) {
      this.curSubMenu = index;
      await this.getTaskList(true);
    },
    async getTaskList(init) {
      if(init) {
        this.page = 1;
        this.taskList = [];
        this.isFirstLoading = true;
      }
      let searchObj = {
        filterSectionType: this.curMenu === 1 ? 1 : 3,
        searchType: this.curSubMenu,
        sectionType: this.sectionType,
        filterPrincipalIds: this.postForm.filterPrincipalIds,
        taskName: this.postForm.taskName,
        projectIds: this.postForm.projectIds,
        filterStartPlanFinishTime: this.postForm.filterStartPlanFinishTime,
        filterEndPlanFinishTime: this.postForm.filterEndPlanFinishTime,
        page: this.page,
        limit: 20
      }

      let {list, totalCount, totalPage} = await this.$httpN.postB('division/task/filterTaskList', searchObj);
      this.loading = false;
      this.taskList.push(...list);
      if(init) {
        this.totalPage = totalPage;
        this.totalCount = totalCount;
        this.$nextTick(() => {
          this.isFirstLoading = false;
        })
      }
    },
    async loadData() {
      this.loading = true;
      this.page ++;
      await this.getTaskList();
    },
    getArrowType(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()) >= new Date(item.taskStartTime).getTime()? 'arrow-4': 'arrow-2'
      }else if(item.taskStatus === '9') {
        return 'arrow-3'
      }else if(item.taskStatus === '2') {
        return 'arrow-6'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return 'arrow-5'
        } else{
          return 'arrow-1'
        }
      }
    },
    getWord(item) {
      if(item.taskStatus === '1') {
        return new Date(dateUtil.thisDay()).getTime() >= new Date(item.taskStartTime).getTime()? '进行中': '未开始'
      }else if(item.taskStatus === '9') {
        return '已终止'
      }else if(item.taskStatus === '2') {
        return '待确认'
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          return '逾期完成'
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          return '按时完成'
        }else{
          return '提前完成'
        }
      }
    },
    analyzeData(item) {
      if(item.taskStatus === '1') {
        if(new Date(dateUtil.thisDay()) < new Date(item.taskStartTime).getTime()){
          return ''
        }else {
          if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
            return `逾期${time}天`
          }else {
            let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
            return `剩余${time}天`
          }
        }
      }else if(item.taskStatus === '9') {
        return ''
      }else if(item.taskStatus === '2') {
        if(new Date(dateUtil.thisDay()) > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime);
          return `逾期${time}天`
        }else {
          let time = this.daysDiff(dateUtil.thisDay(), item.taskEndTime) + 1;
          return `剩余${time}天`
        }
      }else if(item.taskStatus === '3') {
        if(new Date(item.taskRealEndtime).getTime() > new Date(item.taskEndTime).getTime()) {
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `逾期${time}天`
        }else if(new Date(item.taskRealEndtime).getTime() === new Date(item.taskEndTime).getTime()){
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return ''
        }else{
          let time = this.daysDiff(item.taskRealEndtime, item.taskEndTime);
          return `提前${time}天`
        }
      }
    },
    daysDiff(oDate1,oDate2){
      let  aDate, iDays;
      oDate1 = new Date(oDate1);
      oDate2 = new Date(oDate2);
      iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 /24);
      return Math.abs(iDays)
    },
    addTask() {
      this.$router.push({ name: 'mlivolobim-addTask'})
    },
  },
  async mounted() {
    this.mobileGetDevice(({model, brand, version}) => {
      if(brand === 'iPhone' && ( model.indexOf('10') > 0 || model.indexOf('11') > 0)) {
        this.bottomBtnPosition = '66px';
      }
    })
    await this.getTaskList(true);
    if(this.$route.params.taskId) {
      await this.openTaskDetail(this.$route.params.taskId)
    }
  },
  computed: {
    disabled () {
      return this.isFirstLoading || this.loading || this.noMore
    },
    noMore () {
      return this.page >= this.totalPage;
    },
    hasFilter() {
      return !(this.postForm.filterPrincipalIds === '' && this.postForm.taskName === '' && this.postForm.projectIds === '' && this.postForm.filterStartPlanFinishTime === '' && this.postForm.filterEndPlanFinishTime === '')
    }
  },
}
</script>

<style lang="scss" scoped>
.task-module{
  height: calc(100vh - 46px);
  box-shadow: 4px 4px 4px rgb(221, 221, 221);
  position: relative;
  .tool-bar {
    background-color: #FFF;
    padding: 0 20px;
    .menu-list {
      height: 46px;
      line-height: 46px;
      display: flex;
      flex-wrap: wrap;
      justify-content:space-between;
      align-content: flex-start;
      .menu-item {
        text-align: center;
        img {
          width: 14px;
          height: 14px;
        }
        .dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #4983FF;
          display: inline-block;
          vertical-align: super;
        }
      }
      .active {
        color: #4983FF;
      }
    }
  }
  .submenu-list {
    overflow-x: auto;
    background-color: #FFF;
    height: 40px;
    > div {
      white-space: nowrap;
      vertical-align: middle;
      margin-top: 7px;
      .menu-item {
        padding: 5px 10px;
        border-radius: 20px;
        text-align: center;
        display: inline-block;
        margin-left: 20px;
        &:last-child {
          margin-right: 20px;
        }
      }
      .active {
        background-color: #4983FF;
        color: #FFF;
        font-weight: bold;
      }
    }
  }
  .content {
    height: calc(100% - 86px - 24px);
    overflow-y: auto;
    .task-item{
      width: calc(100% - 40px);
      margin: 20px;
      background-color: #FFF;
      border-radius: 5px;
      box-shadow: 0px 0px 1px rgb(221, 221, 221);
      padding: 30px 45px;
      cursor: pointer;
      position: relative;
      &:hover{
        box-shadow: 0px 0px 4px rgb(221, 221, 221);
      }
      .arrow-status{
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 30px #4495FF;
        border-left:solid 30px #4495FF ;
        border-bottom:solid 30px transparent;
        border-right:solid 30px transparent;
        &.arrow-1{
          border-top:solid 30px #21D779;
          border-left:solid 30px #21D779 ;
        }
        &.arrow-2{
          border-top:solid 30px #9987FA;
          border-left:solid 30px #9987FA ;
        }
        &.arrow-3{
          border-top:solid 30px #DBDADA;
          border-left:solid 30px #DBDADA ;
        }
        &.arrow-4{
          border-top:solid 30px #4495FF;
          border-left:solid 30px #4495FF ;
        }
        &.arrow-5{
          border-top:solid 30px #B0C7CD;
          border-left:solid 30px #B0C7CD ;
        }
        &.arrow-6{
          border-top:solid 30px #E6A23C;
          border-left:solid 30px #E6A23C ;
        }
      }
      .task-status{
        position: absolute;
        width: 60px;
        line-height: 20px;
        left: -6px;
        top: 11px;
        color: white;
        transform: rotate(-45deg);
        text-align: center;
        font-weight: normal;
      }
      &::after{
        content: '';
        width:0;
        height:0;
        position: absolute;
        top: 0;
        left: 0;
        border-top-left-radius: 5px;
        border-top:solid 15px white;
        border-left:solid 15px white ;
        border-bottom:solid 15px transparent;
        border-right:solid 15px transparent;
      }
      .top{
        display:flex;
        .logo{
          width: 48px;
          height: 48px;
          text-align: center;
          background: #409EFF;
          text-align: center;
          border-radius: 4px;
        }
        .task-info{
          width: calc(100% - 48px);
          p{
            margin: 0;
            padding-left:10px;
          }
          .taskName{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
          }
          .project{
            margin-top: 15px;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            span{
              background: #FFDCDC;
              color: #FF5050;
              padding: 2px 6px;
              border-radius: 3px;
            }
          }
        }
      }
      .bottom{
        margin-top: 10px;
        p{
          margin: 5px 0 0 0 ;
          color: #79828C;
          span{
            margin-left: 5px;
          }
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  .add-btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #409EFF;
    background-image: linear-gradient(#79BBFF, #409EFF);
    box-shadow: 1px 1px 1px rgb(221, 221, 221);
    text-align: center;
    color: #FFF;
    font-size: 1.5rem;
    line-height: 40px;
    z-index: 3;
  }
}
</style>